import React, { useState, useEffect } from 'react';
import { Button, Form, Input, Select, DatePicker, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { rizhi_list } from '../../../api/niu';
import './Rizhi.scss';

interface DataType {
    key: string;
    name: string;
    state: string;
    time: string;
    matterid: any
}
const { RangePicker } = DatePicker;
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

interface Props { }

function Rizhi(props: Props) {
    const [form] = Form.useForm();

    // 数据源
    var [rizhiData, setRizhiData] = useState<DataType[]>([])

    var rizhiList = async () => {
        var res = await rizhi_list();
        console.log(res.data)
        setRizhiData(res.data);
    }
    useEffect(() => {
        rizhiList();
    }, [])

    const columns: ColumnsType<DataType> = [
        {
            title: '排序号',
            render: (_, record) => <a>{rizhiData.indexOf(record) + 1}</a>,
            width: 100,
        },
        {
            title: '事项名称',
            dataIndex: 'name',
            key: 'name',
            width: 400
        },
        {
            title: '操作类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '事项版本',
            dataIndex: 'edition',
            key: 'edition',
        },
        {
            title: '操作人',
            dataIndex: 'person',
            key: 'person',
        },
        {
            title: '操作时间',
            dataIndex: 'time',
            key: 'time',
        },
    ];
    const data: DataType[] = [

    ];

    const onFinish = (values: any) => {
        console.log(values);
    };

    const onReset = () => {
        form.resetFields();
    };
    return (
        <div className='rizhi'>
            <div className='rizhiBox-top'>
                <Form
                    {...layout}
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                    style={{ maxWidth: 1435 }}
                >
                    <div className='topBox'>
                        <Form.Item className='search' name="name" label="事项名称" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item className='search' name="type" label="操作类型" rules={[{ required: true }]}>
                            <Select>
                                <Select.Option value="demo1">全部</Select.Option>
                                <Select.Option value="demo2">新增事项</Select.Option>
                                <Select.Option value="demo3">提交通过</Select.Option>
                                <Select.Option value="demo4">提交不通过</Select.Option>
                                <Select.Option value="demo5">编辑事项</Select.Option>
                                <Select.Option value="demo6">申请取消</Select.Option>
                                <Select.Option value="demo7">取消不通过</Select.Option>
                                <Select.Option value="demo8">取消通过</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item className='search' name="edition" label="事项版本" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item className='search' name="person" label="操作人" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item className='search-time' name="time" label="操作时间" rules={[{ required: true }]}>
                            <RangePicker />
                        </Form.Item>
                    </div>
                    <Form.Item className='topBottom' {...tailLayout}>
                        <Button className='search' type="primary" htmlType="submit">
                            查询
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <div className='rizhiBox-bottom'>
                <Table columns={columns} dataSource={rizhiData} />
            </div>

        </div>
    );
}

export default Rizhi;